<template>
  <page-layout :title="role.name" :isBreadcrumb="isBreadcrumb" class="role-detail">
    <div slot="headerContent">{{ role.memo }}</div>
    <template slot="extra">
      <a-space :size="15">
        <a-button type="primary" icon="plus" v-if="role.enableIf" @click="onAdd">添加人员</a-button>
        <a-button icon="edit" @click="onEdit">编辑角色</a-button>
        <a-popconfirm title="确定要删除该角色吗?" ok-text="确定" cancel-text="取消" @confirm="onConfirmDelete">
          <a-button icon="delete">删除角色</a-button>
        </a-popconfirm>
      </a-space>
    </template>
    <detail type="role" :isSave="isSave" :keyId="role.id" :columns="columns" :dataSource="dataSource" :defaultChecked="defaultChecked" @confirmDelete="onDelete" :page="pageNum" :pageSize="pageSize" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange" @role-permission="getSurePermission"></detail>
    <!-- 新建角色Modal -->
    <editRole :isRoleModal="isRoleModal" @cancelModal="onCancel" :role="nowRole"></editRole>
    <!-- 添加成员Modal -->
    <addMember :memberModal="isMemberModal" @cancelModal="onCancel" :roleName="role.name"></addMember>
  </page-layout>
</template>

<script>
import Detail from '../modal/Detail';
import PageLayout from '@/layouts/PageLayout';
import editRole from '../modal/EditRoleModal';
import addMember from '../modal/addMemberModal';
import { updateRole, deleteRole, rolePermission, roleUser, removeUser, addMemeber } from '@/services/role';
export default {
  name: 'characterDetails',
  components: { Detail, PageLayout, editRole, addMember },
  props: {
    role: Object,
  },
  data () {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '部门',
          dataIndex: 'deptNames',
        },
        {
          title: '添加时间',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      isSave: false,
      dataSource: [],
      isBreadcrumb: [],
      isRoleModal: false,
      isMemberModal: false,
      // 新增角色无id   修改角色有id
      addRoleState: {
        id: '',
        name: '',
        enableIf: '',
        memo: '',
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      defaultChecked: [],
      nowRole: {}
    };
  },
  watch: {
    role: {
      handler (val) {
        let { enableIf, id, name, memo } = val;
        this.nowRole = { enableIf, name, memo };
        if (id) {
          this.getRolePermission();
          this.getRoleUser();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    onAdd () {
      this.isMemberModal = true;
    },
    onEdit () {
      this.isRoleModal = true;
    },
    onCancel (result) {
      let { data, modal, success } = result;
      if (modal == '添加人员') {
        if (success == 'ok') {
          let params = {
            roleId: this.role.id,
            userIds: data.memberList.toString(),
            status: 0,
          };
          addMemeber(params).then(res => {
            let { code, data, msg } = res.data;
            if (code == 200) {
              this.getRoleUser();
            } else {
              this.$message.error(msg);
            }
          });
        }
        this.isMemberModal = false;
      } else if (modal == '新建角色') {
        if (success == 'ok') {
          this.addRoleState = { id: this.role.id, ...data };
          this.editRole(this.addRoleState);
        }
        this.isRoleModal = false;
      }
    },
    onDelete (data) {
      let user;
      if (typeof data === 'object') {
        data.forEach(el => {
          this.dataSource = this.dataSource.filter(val => val.id != el);
        });
        user = data.toString();
      } else {
        this.dataSource = this.dataSource.filter(val => val.id != data);
        user = data;
      }
      let params = {
        roleId: this.role.id,
        userIds: user,
        memo: this.role.memo,
        status: 1,
      };
      removeUser(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success(msg);
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (data) {
      this.pageNum = data.page;
      this.pageSize = data.pageSize;
      this.getRoleUser();
    },
    onSizeChange (data) {
      this.pageNum = 1;
      this.pageSize = data.size;
      this.getRoleUser();
    },
    onConfirmDelete () {
      deleteRole({ id: this.role.id }).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success(msg);
          this.$emit("requet-list")
        } else {
          this.$message.error(msg);
        }
      });
    },
    editRole (params) {
      updateRole(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success(msg);
          this.$emit("requet-list")
        } else {
          this.$message.error(msg);
        }
      });
    },
    getRolePermission () {
      rolePermission({ id: this.role.id }).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          if (data) {
            const list = data.split(',').map(Number);
            this.defaultChecked = list;
          }
        } else {
          this.$message.error(msg);
        }
      });
    },
    getRoleUser () {
      let params = {
        id: this.role.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.dataSource = [];
      roleUser(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.dataSource = data.content;
          this.total = data.totalElements;
        } else {
          this.$message.error(msg);
        }
      });
    },
    getSurePermission (data) {
      this.isSave = true;
      let params = {
        roleId: this.role.id,
        authorityIds: data.toString(),
        status: 2,
      };
      addMemeber(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.isSave = false;
          this.$message.success(msg);
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.role-detail {
  /deep/ .page-header {
    padding: 0 24px;
    position: relative;
  }
  /deep/ .page-header .page-header-wide .detail .main .extra {
    position: absolute !important;
    right: 48px !important;
    top: 0 !important;
  }
  /deep/ .page-header .page-header-wide .detail .main .title {
    margin-bottom: 0 !important;
  }
  /deep/ .page-content.side.fixed {
    padding: 0;
  }
}
</style>
